<template>
  <div class="my-table">
    <div class="board_sum_title" v-html="resForm.docTitle"></div>
    <div class="board_sum_tips">{{ resForm.docSubtitle }}</div>

    <el-row class="my-row" v-for="(item, index) in dataList" :key="index">
      <el-col :span="Number(li.span)" class="my-col" v-for="(li, j) in item" :key="j">
        <template v-if="li.tag === 'text'">
          <div class="label" v-html="li.lable"></div>
          <div :class="routerQuery.recordType === '01-05' ? 'val' : 'val-sign'">
            {{ li.defaultValue }}
          </div>
        </template>

        <template v-if="li.tag === 'input'">
          <div class="label" v-html="li.lable"></div>
          <div class="val">
            <el-input
              v-if="!disabled"
              class="week_input"
              type="textarea"
              placeholder="请输入"
              v-model="form[li.vModel]"
              :disabled="disabled"
              :autosize="{ minRows: parseInt(li.rows), maxRows: 10000 }"
              @change="inputChange"></el-input>
            <div v-if="disabled" class="detail_sum" v-html="removeHtmlStyle(form[li.vModel])"></div>
            <p class="sum_table_day" v-if="li.autograph">
              {{ li.autograph }}
            </p>
          </div>
        </template>

        <template v-if="li.tag === 'sign'">
          <div class="label" v-html="li.lable"></div>
          <div class="val">
            <p class="no_data_sum"></p>
            <p class="sum_table_day" v-if="li.autograph">
              {{ li.autograph }}
            </p>
          </div>
        </template>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getTemplateByCode } from '@apis/board.js'

export default {
  name: 'MyTable',
  components: {},
  props: {
    tableForm: {
      type: Object,
      default: () => {
        return {}
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataList: [
        /**
          {
            // 默认值
            defaultValue: '丁勇',
            // 显示
            lable: '姓名',
            // 暂无用
            layout: 'col',
            // 处于那一行
            lines: 1,
            // 输入框占位符
            placeholder: '',
            // 是否是必填
            required: 'false',
            // key+value 所在宽度（全部24）
            span: 8,
            // 标签类型：text：文本；input：输入框；sign：占位高度
            tag: 'text',
            // 绑定值的key(form属性中的key值)
            vModel: '',
          },
         *
         */
      ],
      resForm: {},
      form: {},
      routerQuery: {},
      formName: [],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.routerQuery = this.$route.query
    this.getPageDate()
  },
  methods: {
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
        newHtml = html.replace(/\n/g, '<br/>')
      }
      return newHtml
    },
    getPageDate() {
      getTemplateByCode({
        tempCode: this.routerQuery.tempCode,
        params: this.routerQuery,
      })
        .then(result => {
          this.resForm = result.data
          this.setData(result.data.docTemp)
        })
        .catch(() => {})
    },
    inputChange() {
      this.$emit('dataChange', this.form, this.formName)
    },
    setData(arr) {
      const data = []
      const form = {}
      const formName = []
      let colIndex = ''
      arr.forEach(item => {
        if (colIndex !== item.lines) {
          data.push([])
        }
        colIndex = item.lines
        data[colIndex - 1].push(item)
        if (item.tag === 'input') {
          form[item.vModel] = item.defaultValue
        }
        if (item.required === 'true') {
          formName.push({ id: item.vModel, name: item.placeholder })
        }
      })

      this.dataList = data
      this.form = form
      this.formName = formName
      this.$emit('dataChange', this.form, this.formName)
    },
    sumbitForm1(data) {
      console.log('sumbitForm1提交数据：', data)
    },
  },
}
</script>

<style lang="scss" scoped>
.my-table {
  padding: 0 50px 30px;
  // border: 1px solid red;
  // width: 230mm;
  // margin: 0 auto;
  .board_sum_title {
    font-size: 24px;
    text-align: center;
    height: 56px;
    line-height: 56px;
  }
  .board_sum_tips {
    font-size: 16px;
    text-align: center;
    padding-bottom: 10px;
    height: 30px;
  }
  .my-row {
    display: flex;
    border: 1px solid #ccc;
    &:not(:last-child) {
      border-bottom: 0;
    }
    .my-col {
      display: flex;
      &:last-child {
        .val {
          border-right: 0;
        }
        .val-sign {
          border-right: 0;
        }
      }
      .label,
      .val {
        text-align: center;
        padding: 10px;
      }
      .label {
        width: 100px;
        border-right: 1px solid #ccc;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .val-sign {
        flex: 1;
        text-align: left;
        display: flex;
        align-items: center;
        padding-left: 10px;
        color: #606266;
        border-right: 1px solid #ccc;
      }
      .val {
        flex: 1;
        // background-color: #ccc;
        border-right: 1px solid #ccc;

        .week_input {
          font-size: 14px;
          /deep/ .el-textarea__inner {
            line-height: 2;
          }

          /deep/ .el-textarea__inner {
            border: none;
            border-radius: 0;
            width: 100%;
            background-color: #fff;
            color: #606266;
          }
          /deep/.el-input__inner {
            border: none;
            border-radius: 0;
            width: 100%;
          }
        }

        .no_data_sum {
          height: 120px;
          width: 100%;
          margin-bottom: 20px;
          text-align: left;
        }
        .sum_table_day {
          // position: absolute;
          text-align: right;
          padding-right: 80px;
          margin-top: 20px;
          color: #a7a7a7;
          white-space: pre;
          span {
            padding: 0 15px;
          }
          :nth-child(1) {
            padding-left: 60px;
          }
        }
      }
      .detail_sum {
        background-color: #fff;
        color: #606266;
        line-height: 2;
        text-align: left;
      }
    }
  }
}
</style>
